<template>
  <div class="wpwork-common-layout" >
    <div class="wpwork-common-layout-center wpwork-flex-main" >
      <div class="overview-page">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(chart, index) in chartList" :key="index"> <!-- 每列占 8 格（每行 3 列） -->
            <el-card class="chart-card">
              <template #header> <!-- 卡片头部：标题 + 详情按钮 -->
                <div class="card-header">
                  <span class="spanStyle"></span>
                  <span>{{ chart.title }}</span>
                  <el-button type="text" style="margin-left: auto;" @click = "isCollapse = chart.isCollapse">详情></el-button>
                </div>
              </template>
              <div :id="chart.id" class="chart-content"></div> <!-- 图表容器 -->
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>   
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'OverviewPage',
  components: {
  },
  data() {
    return {
      isCollapse : 1,
      chartList: [
        // 图表 1：当月事件上报（折线图）
        {
          id: 'chart1',
          title: '当月事件上报',
          isCollapse: 2,
          option: {
            color: [ '#53B997'],
            // title: { text: '当月事件上报' },
            tooltip: {},
            axisLine: {  
              show: true,  
              lineStyle: { type: 'dashed', color: '#ccc' } // 轴线改为虚线  
            },
            xAxis: {
              data: ["01", "02", "03", "04","05", "06", "07", "08","09", "10", "11", "12"]
            },
            yAxis: {},
            series: [
              // { name: 'London', type: 'line', data: [361, 627, 765, 1259] },
              { name: '', type: 'line', data: [661, 716, 880, 1044, 361, 627, 765, 1259,235, 1235, 523, 251],smooth: true }
            ]
          }
        },
        // 图表 5：当月考勤统计（折线图）
        {
          id: 'chart5',
          title: '当月考勤统计',
          isCollapse: 3,
          option: {
            color: [ '#53B997'],
            // title: { text: '当月考勤统计' },
            tooltip: {},
            xAxis: { data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"] },
            // yAxis: { data: [0, 50,100,150,200,220]},
            yAxis: {},
            series: [
              { 
                type: 'bar',
                data: [189, 200, 178, 200, 168, 189, 200,200, 177, 200, 188, 200],
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              },
            ]
          }
        },
        
        // 图表 4：当月围栏告警统计（折线图）
        {
          id: 'chart4',
          title: '当月围栏告警统计',
          isCollapse: 6,
          option: {
            color: [ '#53B997', '#376DF7'],
            // title: { text: '当月围栏告警统计' },
            tooltip: {},
            legend: { data: ['出区', '入区'] },
            xAxis: {
              data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
            },
            yAxis: {},
            series: [
              { name: '出区', type: 'line', data: [100, 180, 150, 160,190, 170, 160, 123,161, 121, 123, 162] },
              { name: '入区', type: 'line', data: [200, 166, 200, 180,100, 212, 211, 190,178, 201, 178, 120] }
            ]
          }
        },
        // 图表 3：当月统计任务（柱状图）
        {
          id: 'chart3',
          title: '当月统计任务',
          isCollapse: 4,
          option: {
            color: [ '#5B8FF9'],
            // title: { text: '当月统计任务' },
            xAxis: { 
              data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
            },
            yAxis: {},
            series: [{
              type: 'bar',
              data: [783, 450, 300, 280, 758, 723, 520,523, 731, 631, 146, 256]
            }]
          }
        },
        // 图表 2：当月即时消息统计（环形图）
        {
          id: 'chart2',
          title: '当月即时消息统计',
          isCollapse: 5,
          option : {
            color: ['#F8C541', '#6750AA', '#376DF7', '#53B997'],
            legend: {
              orient: 'vertical',
              right: 10,
              // top: 'middle',
              data: ['位置', '图片', '视频', '文本']
            },
            series: [
              {
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                data: [
                  { value: 310, name: '位置' },
                  { value: 234, name: '图片' },
                  { value: 135, name: '视频' },
                  { value: 748, name: '文本' }
                ]
              }
            ]
          }
        },
        // 图表 6：示例补充（按需添加）
        {
          id: 'chart6',
          title: '当月巡检统计情况',
          isCollapse: 7,
          option: {
            color: [ '#376DF7'],
            // title: { text: '当月事件上报' },
            tooltip: {},
            xAxis: {
              data: ["01", "02", "03", "04","05", "06", "07", "08","09", "10", "11", "12"]
            },
            yAxis: {},
            series: [
              // { name: 'London', type: 'line', data: [361, 627, 765, 1259] },
              { name: '', type: 'line', data: [525, 646, 432, 787, 442, 214, 647, 868,798, 323, 658, 312] }
            ]
          }
        }
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  watch:{
    isCollapse(newVal, oldVal) {
      // 当值变化时，向父组件发送事件
      this.$emit('value-changed', newVal)
    }
  },
  methods: {
    initCharts() {
      this.chartList.forEach(item => {
        const chart = echarts.init(document.getElementById(item.id));
        chart.setOption(item.option);
        // 窗口resize时重置图表尺寸
        window.addEventListener('resize', () => chart.resize());
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.overview-page {
  padding-top: 10px;
  background-color: #F1F7FC;
  max-height: calc(100vh - 160px); /* 根据实际情况调整 */
  overflow-y: auto;
  overflow-x: hidden;

}

.chart-card{
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.chart-content {
  height: 262px; /* 图表高度，根据需求调整 */
  margin-right: 15px;
}

::v-deep .el-card__header{
 padding: 6px 20px !important;
}

.spanStyle{
  display: inline-block;
  width: 4px;
  height: 20px;
  background: linear-gradient(#3B6FE6, #89B5FF);
  margin-right: 10px;
}

</style>